<template>
  <el-checkbox-group v-model="checked" :disabled="disabled">
    <el-checkbox border v-for="icon in icons" :label="icon" :key="icon">
      <img alt="" :src="`${path}icon_${icon}.png`" width="30">
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  name: 'icon-selector',
  props: ['iconStr', 'disabled'],
  data () {
    return {
      icons: ['s', 'r', 'q', 'p', 'u', 'o', 'n', 'm', 'l', 'k', 'j', 'zj', 'h', 'g', 'e', 'd', 'c', 'b', 't', 'a'],
      // path: location.protocol + '//' + location.host
      path: 'https://www.takigen.cn/static/assets/icons/'
    }
  },
  computed: {
    checked: {
      get () {
        return this.iconStr ? this.iconStr.toLowerCase().split(' ') : []
      },
      set (v) {
        this.$emit('update:iconStr', v.join(' ').toUpperCase())
      }
    }
  }
}
</script>

<style>
.el-checkbox {
  margin-left: 0 !important;
  margin-right: 30px;
}
</style>
